<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表页面</title>
</head>
<style>
    .goods-list{
      width: 100%;
    }
    .goods-list:hover{
      box-shadow: 3px 3px 5px black;
    }
</style>
<body>
  <div class="goods-list">
    <table id="tab">
      <tr>
        <th>编号</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品描述</th>
        <th>商品状态</th>
        <th>商品类型</th>
        <th>商品数量</th>
        <th>操作</th>
      </tr>
    </table>
  </div>
</body>
<script>
  window.onload = function () {
    //核心对象
    var http = new XMLHttpRequest();

    //打开通道
    http.open('get','/listForAll',true);

    //回调函数
    http.onreadystatechange = function () {
      if(http.readyState == 4 && http.status == 200){
        let result = http.responseText;
        //表示string 格式的转换标准json  【】 {}
        let data = JSON.parse(result);
        let tab = document.getElementById('tab');
        for(let i = 0;i < data.length;i++){
          let tr = tab.insertRow();

          let td1 = tr.insertCell();
          td1.innerText = data[i].id;

          let td2 = tr.insertCell();
          td2.innerText = data[i].categoryName;

          let td3 = tr.insertCell();
          td3.innerText = data[i].categoryDesc;

          let td4 = tr.insertCell();
          td4.innerText = data[i].proName;

          let td5 = tr.insertCell();
          td5.innerText = data[i].proPrice;

          let td6 = tr.insertCell();
          td6.innerText = data[i].proDesc;

          let td7 = tr.insertCell();
          td7.innerText = data[i].proStatus;

          let td8 = tr.insertCell();
          td8.innerText = data[i].proType;

          let td9 = tr.insertCell();
          td9.innerText = data[i].proNum;
        }
      }
    }

    //发送请求
    http.send();
  }
</script>
</html>